'use strict'
import React from "react";
import {render} from 'react-dom';
import {Link} from 'react-router';
//引入工具类
import MMALL_COM from 'util/comm.jsx';
import ORDER from 'service/order_service.jsx';

//引入依赖页面
import PageTitle  from 'page/component/page-title/index.jsx';
import Pagination from 'page/component/pagination/index.jsx';

var _comm  = new MMALL_COM();
var _order = new ORDER();
class OrderList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            serchType:'orderNumber',
            listType:'list',
            pageSize:10,
            pageNum:1,
            searchKeyword:'',
            list:[]
        }
        //绑定this
        this.getOrderList=this.getOrderList.bind(this);
    }
    componentDidMount(){
        this.getOrderList();
    }
    //获取订单列表
    getOrderList(pageNum){
        let orderParam={
            listType : this.state.listType,
            pageNum  : pageNum||this.state.pageNum
        }
        if(this.state.listType==="search"&&this.state.serchType==="orderNumber"){
            orderParam.orderNo=this.state.searchKeyword;
        }
        _order.getOrderList(orderParam).then(res=>{
            this.setState(res);
        },
        msg=>{
            _comm.errorTip(msg);
        })
    }
    //改变页码
    onChangePage(pageNum){
        this.getOrderList(pageNum)
    }
    //表单改变
    onChangeInput(e){
        let name=e.target.name,
            value=e.target.value;
        this.setState({
            [name]:value
        })

    }
    //搜索按钮提交
    onSearchSubmit(){
        this.setState({
            listType:'search'
        },()=>{
            this.getOrderList(1)
        })
    }
    //渲染页面
    render(){
        return (
        <div id="page-wrapper">
            <PageTitle pageTitle="订单管理">

            </PageTitle>
            <div className="row">
                <div className="search-wrap col-md-12">
                    <div className="form-inline">
                        <div className="form-group">
                            <select className="form-control">
                                <option value="orderNumber">按订单号查询</option>
                            </select>
                        </div>
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="订单号" name="searchKeyword" onChange={this.onChangeInput.bind(this)} />
                        </div>
                        <button type="button" className="btn btn-default" onClick={this.onSearchSubmit.bind(this)}>查询</button>
                    </div>
                </div>
                <div className="table-wrap col-lg-12">
                    <table className="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>收件人</th>
                                <th>订单状态</th>
                                <th>订单总价</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        {   
                            this.state.list.map((order,index)=>{
                                return(
                                    <tr key={index}>
                                        <td><Link className="opear" to={"/order/detail/"+order.orderNo}>{order.orderNo}</Link></td>
                                        <td>{order.receiverName}</td>
                                        <td>{order.statusDesc}</td>
                                        <td>￥{order.payment}</td>
                                        <td>{order.createTime}</td>
                                        <td><Link className="opear" to={"/order/detail/"+order.orderNo}>查看</Link></td>
                                    </tr>
                                 )
                            })
                        }
                        </tbody>
                    </table>
                    {this.state.pages>1?<Pagination onChange={this.onChangePage.bind(this)} current={this.state.pageNum} total={this.state.total}  showLessItems />:""}
                </div>
            </div>
        </div>
        );
    }
}
export default OrderList;
